<template>
    <el-row>
        <el-row style="padding:20px;background:#f8f8f8">
            <el-col :span="16">
                <span style="font-size:14px">微信昵称：</span>
                <el-input style="width:260px" v-model="search.keyword" placeholder="请输入微信昵称搜索"></el-input>
            </el-col>
            <el-col :span="24" style="margin-top:20px">
                <el-button type="primary" @click="searchUser" style="margin-left:70px">搜索</el-button>
                <el-button type="text" @click="clearSearch">清空</el-button>
            </el-col>
        </el-row>
        <el-table :data="userData" stripe style="margin-top:24px">
            <el-table-column prop="avatarUrl" label="头像" header-align="center" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.avatarUrl" alt="" style="width:60px;height;60px;border-radius:50%">
                </template>
            </el-table-column>
            <el-table-column prop="nickName" label="微信昵称" header-align="center" align="center">
            </el-table-column>
            <el-table-column label="性别" header-align="center" align="center">
                <template slot-scope="scope">
                    <span>{{scope.row.gender==1?"男":scope.row.gender==2?"女":"未知"}}</span>
                </template>
            </el-table-column>
            <el-table-column label="地区" header-align="center" align="center">
                <template slot-scope="scope">
                    <div>{{scope.row.country}}</div>
                    <div>{{scope.row.province}}</div>
                    <div>{{scope.row.city}}</div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" header-align="center" align="center">
                <template slot-scope="scope">
                    <span>{{format(scope.row.created_at)}}</span>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin:24px 0">
            <el-col :span="24" style="text-align:right">
                <el-pagination background layout="total,prev,pager,next" :total="pagination.rowCount" :page-size="pagination.pageSize" @current-change="changePage"></el-pagination>
            </el-col>
        </el-row>
    </el-row>
</template>

<script>
export default {
    layout: "shop",
    data() {
        return {
            userData: [],
            pagination: {},
            search: {
                keyword: ""
            }
        };
    },
    async asyncData({ app }) {
        let data = {};
        //用户列表
        const order = await app.$axios.$get("/api/app/home/user/user/index");
        if (order && order.errmsg === "ok") {
            data.userData = order.data.data;
            data.pagination = order.data.pagination;
        }
        return data;
    },
    methods: {
        //用户列表
        async getUser() {
            let url = `/api/app/home/user/user/index?page=${
                this.pagination.page
            }`;
            if (this.search.keyword) {
                url += `&keyword=${this.search.keyword}`;
            }
            const order = await this.$axios.$get(url);
            if (order && order.errmsg === "ok") {
                this.userData = order.data.data;
                this.pagination = order.data.pagination;
            }
        },
        changePage(page) {
            this.pagination.page = page;
            this.getUser();
        },
        //搜索
        searchUser() {
            this.pagination.page = 1;
            this.getUser();
        },
        clearSearch() {
            this.search = {
                keyword: ""
            };
            this.pagination.page = 1;
            this.getUser();
        }
    }
};
</script>
